<template>
  <div class="bgi">
    <el-row type="flex" justify="center" align="middle" class="full-height">
      <el-col :span="8" style="background-color: white;padding: 30px;">
        <h2 class="login-title">用户管理系统</h2>
        <el-form ref="form" :model="loginUser" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="loginUser.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="loginUser.password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">登录</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios  from "axios";
export default {
  name: "LoginView",
  data() {
    return {
      loginUser: {
        username: '张三',
        password: '123456'
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!',this.loginUser);
      // 发送登录请求
      axios.post('/user/login', this.loginUser)
          .then(response => {
            console.log('登录成功', response);
            if (response.code == 2000){
              // ElementUI弹框,官方资料 https://element.eleme.cn/#/zh-CN/component/message
              this.$message.success({
                message: '登录成功',  // 登录成功后，显示成功提示
                type: 'success',
                duration: 1000      // 登录成功后，提示框显示时间
              });
              // 登录成功后，将用户名存储到 Vuex 中
              this.$store.commit('setUsername', this.loginUser.username);
              // 登录成功后，将token存储到 Vuex 中
              this.$store.commit('setToken', response.data);
              // 登录成功后，跳转到首页
              this.$router.push('/admin');
            } else {
              this.$message.error('登录失败，请检查用户名和密码');
            }
          })
          .catch(error => {
            console.error('登录失败', error);
          });
    }
  }
}
</script>

<style scoped>
.bgi{
  background-image: url("../assets/backgroundimg.webp");
  height: 100vh;
  background-size: 90%;
  /* 移除默认的 margin 和 padding */
  margin: 0;
  padding: 0;
}

/* 添加标题样式并移除默认 margin */
.login-title {
  margin-top: 0;
  padding-top: 0; /* 移除顶部内边距 */
  text-align: center; /* 居中标题文本 */
}

/* 确保 el-row 占满整个视口高度 */
.full-height {
  min-height: 100vh;
}
</style>